<template>
  <input type="text" v-model="name">
  <div>{{name}}</div>

  <br/>

  <input type="text" v-model="obj.name">
  <div>{{obj.name}}</div>

  <br/>
  <div>监听多个值</div>
  <input type="text" v-model="name1">
  <input type="text" v-model="name2">
</template>

<script>

import { reactive, toRef, computed, ref, watch } from 'vue'

export default {
  name: 'App',
  setup (props, context) {

    // 监听ref
    let name = ref('')

    watch(name, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    }, {})

    // 监听reactive
    const obj = reactive({
      name: 'hello'
    })

    watch(() => obj.name, (n, o) => {
      console.log(n, o)
    })

    let name1 = ref('')
    let name2 = ref('')

    watch([name1, name2], (n, o) => {
      console.log(n, o)
    })
    return {
      name,
      obj,
      name1,
      name2
    }
  }
}
</script>

<style>

</style>
